<template>
  <div class="address">
    <van-nav-bar fixed title="添加收货地址" left-arrow @click-left="$router.go(-1)"/>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import { Toast } from 'vant'
import { addAddress, getAreaList } from '@/api/address'

export default {
  data () {
    return {
      areaList: {},
      searchResult: []
    }
  },
  methods: {
    async onSave () {
      Toast('save')
      const data = {
        name: '张小二',
        phone: '18999292929',
        region: [
          {
            value: 782,
            label: '上海'
          },
          {
            value: 783,
            label: '上海市'
          },
          {
            value: 785,
            label: '徐汇区'
          }
        ],
        detail: '北京路1号楼8888室'
      }
      await addAddress(data)
      console.log('添加地址成功')
    },
    onDelete () {
      Toast('delete')
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区'
          }
        ]
      } else {
        this.searchResult = []
      }
    },
    async getAreaList () {
      const { list } = await getAreaList()
      console.log(list)
      this.areaList = {
        province_list: {
          110000: '北京市',
          120000: '天津市'
        },
        city_list: {
          110100: '北京市',
          120100: '天津市'
        },
        county_list: {
          110101: '东城区',
          110102: '西城区',
          120101: '天津一区',
          120102: '天津二区'
          // ....
        }
      }
    }
  },
  created () {
    this.getAreaList()
  }
}
</script>

<style lang="less" scoped>
.address {
  .van-address-edit {
    margin-top: 50px;
  }
}
</style>
